<template>
	<!-- main S -->
	<view class="main">
		<!-- banner S -->
		<view class="banner">
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in bannerList" :key="index" >
					<view class="swiper-item">
						<image src="../../static/logo.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- banner E -->
		<!-- channelBox S -->
		<view class="channelBox">
			<view class="channelItem" v-for="(item,index) in channel" :key="index" @tap="goGoodsList" :id="item.id" >
				<view class="box">
					<image src="../../static/logo.png" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="clear_both"></view>
		</view>
		<!-- channelBox E -->
		<!-- slogn S -->
		<view class="slogn">
			<image src="../../static/slogn.png" mode=""></image>
		</view>
		<!-- slogn E -->
		<!-- hotProducts S -->
		<view class="hotProducts">
			<swiper :indicator-dots="true">
				<swiper-item v-for="(item,index) in bannerList" :key="index" >
					<view class="swiper-item">
						<image src="../../static/logo.png" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- hotProducts E -->
		<!-- goodsTypeList S -->
		<view class="goodsTypeList">
			<view :class="{'st':true,'sticky-fixed':isF}">
				<swiper-nav
					:height="height"
					:width="width"
					:current="currentGoodsTypeIndex"
					:nav-list="goodsTypeList"
					:bg-color="bgColor"
					:border-bg-color="borderBgColor"
					:active-color="activeColor"
					:color="color"
					@current-change="currentChange">
				</swiper-nav>
			</view>
			<view class="goodsTypeListContent">
				<view v-if="currentGoodsTypeIndex === index" v-for="(item,index) in goodsTypeList" :key="index" class="goodsDetail" >
					<view class="goodsDetailBox">
						选项卡{{index}}-1的内容
					</view>
					<view class="goodsDetailBox">
						选项卡{{index}}-2的内容
					</view>
					<view class="goodsDetailBox">
						选项卡{{index}}-3的内容
					</view>
					<view class="goodsDetailBox">
						选项卡{{index}}-4的内容
					</view>
					<view class="goodsDetailBox">
						选项卡{{index}}-5的内容
					</view>
					<view class="goodsDetailBox">
						选项卡{{index}}-6的内容
					</view>
				</view>
			</view>
		</view>
		<!-- goodsTypeList E -->
	</view>
	<!-- main E -->
</template>

<script>
	import swiperNav from '@/components/wee-swiper-nav/wee-swiper-nav.vue'
	export default {
		components: {
			swiperNav
		},
		data() {
			return {
				title: 'GoodsSearchList',
				// 可进入商品列表页的渠道
				channelList : [
					{
						id : 1,
						name : "淘宝",
					},
					{
						id : 2,
						name : "京东",
					},
					{
						id : 3,
						name : "拼多多",
					}
				],
				// Banner列表
				bannerList : [
					"../../static/logo.png",
					"../../static/logo.png",
					"../../static/logo.png",
					"../../static/logo.png",
				],
				// 渠道列表
				channel:[
					{
						id : 1,
						name : "淘宝",
						icon : "../../static/logo.png"
					},
					{
						id : 2,
						name : "京东",
						icon : "../../static/logo.png"
					},
					{
						id : 3,
						name : "拼多多",
						icon : "../../static/logo.png"
					},
					{
						id : 4,
						name : "火车票",
						icon : "../../static/logo.png"
					}
				],
				goodsTypeList:[
					{
						id : 1,
						name : "男装1",
					},
					{
						id : 2,
						name : "男装2",
					},
					{
						id : 3,
						name : "男装3",
					},
					{
						id : 4,
						name : "男装4",
					},
					{
						id : 5,
						name : "男装5",
					},
					{
						id : 6,
						name : "女装1",
					},
					{
						id : 7,
						name : "女装2",
					},
					{
						id : 8,
						name : "女装3",
					},
					{
						id : 9,
						name : "女装4",
					},
					{
						id : 10,
						name : "女装5",
					}
				],
				currentGoodsTypeIndex: 0,
				height: 100,
				width: 160,
				bgColor: '',
				activeColor: 'rgb(231,89,19)',
				borderBgColor: 'rgb(231,89,19)',
				color: 'rgb(86,86,86)',
				yuanH: uni.upx2px(870),
				isF: false,
			}
		},
		onLoad(param) {
			let channelId = param.channelId;
			// 设置页面标题
			let channelName = this.$data.channelList[channelId-1]['name'];
			uni.setNavigationBarTitle({
			　　title: channelName
			})
		},
		methods: {
			// 切换滑动导航
			currentChange(e) {
				console.log(e)
				this.currentGoodsTypeIndex = e
			},
			onPageScroll(e) {
				//#ifdef H5
				this.isF = true
				// #endif
				// #ifndef H5
				if (this.yuanH > e.scrollTop) {
					this.isF = false
				} else {
					this.isF = true
				}
				// #endif
			},
		}
	}
</script>

<style>
	.main>.banner{
		background-color: #FFFFFF;
		height: 300rpx;
		width: 95%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 25rpx;
	}
	.banner .swiper-item>image{
		height: 100rpx !important;
		width: 100rpx !important;
	}
	
	.channelBox{
		border: 0rpx solid red;
		width: 95%;
		margin: 0 auto;
		margin-top: 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}
	.channelBox>.channelItem{
		float: left;
		width: 25%;
	}
	.channelItem>.box{
		float: left;
		border: 0rpx solid red;
		text-align: center;
		margin-bottom: 20rpx !important;
		margin: 0 auto;
		margin-left: 20rpx;
		margin-top: 20rpx;
	}
	.box>image{
		height: 120rpx;
		width: 120rpx;
	}
	.box text{
		display: block;
		font-size: 20rpx;
		margin-top: -6rpx;
	}
	
	.slogn{
		width: 612rpx;
		height: 68rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}
	.slogn>image{
		width: 100%;
		height: 100%;
	}
	
	.hotProducts{
		background-color: #FFFFFF;
		height: 300rpx;
		width: 95%;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 25rpx;
	}
	.hotProducts .swiper-item>image{
		height: 100rpx !important;
		width: 100rpx !important;
	}
	
	.goodsTypeList{
		width: 95%;
		margin: 0 auto;
	}
	.goodsTypeList>.goodsTypeListContent>.goodsDetail>.goodsDetailBox{
		border: 0rpx solid red;
		height: 250rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}
	
	.st {
		height: 80rpx;
		/* width: 750rpx; */
		/* background-color: #fff; */
		background-color: rgba(255,255,255,0.5);
		width: 100%;
		margin: 0 auto;
		/* margin-top: 20rpx; */
		border-radius: 20rpx;
		padding-bottom: 10rpx;
		/* z-index: 999; */
		/* top: 300rpx; */
	}
	
	.sticky-fixed {
		/* #ifdef H5 */
		position: sticky;
		top: 44rpx;
		padding-top: 10rpx;
		margin-top: 20rpx;
		/* #endif */
		/* #ifndef H5 */
		position: fixed;
		top: 0;
		/* #endif */
		/* z-index: 999; */
	}
</style>
